<template>
    <div id="app">
        <router-view />
    </div>
</template>

<script>
    import { getToken } from '@/utils/auth';
    export default {
        name: 'App',
        created() {
            if (localStorage.getItem('store')) {
                this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(localStorage.getItem('store'))));
            }
            //在页面刷新时将vuex里的信息保存到sessionStorage里
            window.addEventListener('beforeunload', () => {
                localStorage.setItem('store', JSON.stringify(this.$store.state));
            });
            // this.getMenu()
        },
        beforeDestroy(){
        },
        methods: {
            async getMenu() {
                if (getToken) {
                    let { data } = await this.$Http.getUserMenu();
                    console.log('dizhi', data);
                    this.$store.commit('settings/setMenuList', data);
                    localStorage.setItem('menu', JSON.stringify(data));
                }
            },
        },
    };
</script>
<style lang="scss">
    .content_shb {
        width: calc(100% - 60px);
        min-height: calc(100vh - 150px);
        margin: 30px;
        padding: 30px;
        background-color: #fff;
        border-radius: 30px;
    }
    .el-radio__inner {
        width: 20px;
        height: 20px;
    }
    /*每个页面公共css */
    .flex {
        display: flex;
    }

    .wrap {
        flex-wrap: wrap;
    }

    .nowrap {
        flex-wrap: nowrap;
    }

    .abso {
        position: absolute;
    }

    .rela {
        position: relative;
    }

    .fixed {
        position: fixed;
    }

    .content {
        /* min-height: 100%; */
    }

    .yj10 {
        border-radius: 10px;
    }

    .yj20 {
        border-radius: 20px;
    }

    .yj50 {
        border-radius: 50px;
    }

    .nodata {
        height: 100%;
    }

    /*布局 */
    .column {
        flex-direction: column;
    }

    .row {
        flex-direction: row;
    }

    /*主轴方向对齐*/
    .jc-s {
        justify-content: flex-start;
    }

    .jc-c {
        justify-content: center;
    }

    .jc-e {
        justify-content: flex-end;
    }

    .jc-sb {
        justify-content: space-between;
    }

    .jc-sa {
        justify-content: space-around;
    }

    /*交叉轴方向对齐*/
    .ac-s {
        align-content: flex-start;
    }

    .ac-c {
        align-content: center;
    }

    .ac-e {
        align-content: flex-end;
    }

    .ac-sb {
        align-content: space-between;
    }

    .ac-sa {
        align-content: space-around;
    }

    .ai-s {
        align-items: flex-start;
    }

    .ai-c {
        align-items: center !important;
    }

    .ai-e {
        align-items: flex-end;
    }

    .ai-st {
        align-items: stretch;
    }

    /*字体颜色 */
    .fc-lg {
        color: #b2b2b2;
    }

    .fc-g {
        color: #888888;
    }

    .fc-se {
        color: #353535;
    }
    .fc-ac {
        color: #5555ff;
    }
    .fc-b {
        color: black;
    }

    .fc-w {
        color: #ffffff;
    }

    .fc-l {
        color: #576b95;
    }

    .fc-s {
        color: #09bb07;
    }

    .fc-e {
        color: #e64340;
    }

    .fc-m {
        color: #ffbf27;
    }

    .fc-ws {
        color: #f5f5f5;
    }

    /* 字间距 */
    .ls-1 {
        letter-spacing: 1px;
    }

    .ls-2 {
        letter-spacing: 2px;
    }

    .ls-3 {
        letter-spacing: 3px;
    }

    .ls-4 {
        letter-spacing: 4px;
    }

    .ls-5 {
        letter-spacing: 5px;
    }

    /*背景色 */
    .bc-lg {
        background-color: #b2b2b2;
    }

    .bc-g {
        background-color: #888888;
    }

    .bc-se {
        background-color: #353535;
    }

    .bc-b {
        background-color: black;
    }

    .bc-w {
        background-color: #ffffff;
    }

    .bc-l {
        background-color: #576b95;
    }

    .bc-s {
        background-color: #09bb07;
    }

    .bc-e {
        background-color: #e64340;
    }

    .bc-m {
        background-color: #ffbf27;
    }

    .bc-ws {
        background-color: #f5f5f5;
    }

    /*字体相关 */
    .fz-1 {
        font-size: 11px;
    }

    .fz-2 {
        font-size: 13px;
    }

    .fz-3 {
        font-size: 15px;
    }

    .fz-4 {
        font-size: 18px;
    }

    .fz-5 {
        font-size: 21px;
    }

    .fz-6 {
        font-size: 25px;
    }

    .fz-7 {
        font-size: 40px;
    }

    .fb {
        font-weight: bold;
    }

    .tl-d {
        text-decoration: line-through;
    }

    .tl-u {
        text-decoration: underline;
    }

    /*内边距 */
    .p-1 {
        padding: 8px;
    }

    .pt-1 {
        padding-top: 8px;
    }

    .pr-1 {
        padding-right: 8px;
    }

    .pb-1 {
        padding-bottom: 8px;
    }

    .pl-1 {
        padding-left: 8px;
    }

    .p-2 {
        padding: 26px;
    }

    .pt-2 {
        padding-top: 26px;
    }

    .pr-2 {
        padding-right: 26px;
    }

    .pb-2 {
        padding-bottom: 26px;
    }

    .pl-2 {
        padding-left: 26px;
    }

    .p-3 {
        padding: 36px;
    }

    .pt-3 {
        padding-top: 36px;
    }

    .pr-3 {
        padding-right: 36px;
    }

    .pb-3 {
        padding-bottom: 36px;
    }

    .pl-3 {
        padding-left: 36px;
    }

    /*外边距 */
    .m-1 {
        margin: 8px;
    }

    .mt-1 {
        margin-top: 8px;
    }

    .mr-1 {
        margin-right: 8px;
    }

    .mb-1 {
        margin-bottom: 8px;
    }

    .ml-1 {
        margin-left: 8px;
    }

    .m-2 {
        margin: 26px;
    }

    .mt-2 {
        margin-top: 26px;
    }

    .mr-2 {
        margin-right: 26px;
    }

    .mb-2 {
        margin-bottom: 26px;
    }

    .ml-2 {
        margin-left: 26px;
    }

    .m-3 {
        margin: 36px;
    }

    .mt-3 {
        margin-top: 36px;
    }

    .mr-3 {
        margin-right: 36px;
    }

    .mb-3 {
        margin-bottom: 36px;
    }

    .ml-3 {
        margin-left: 36px;
    }

    /*宽度*/
    .wd-1 {
        width: 10%;
    }

    .wd-2 {
        width: 20%;
    }

    .wd-3 {
        width: 30%;
    }

    .wd-4 {
        width: 40%;
    }

    .wd-5 {
        width: 50%;
    }

    .wd-6 {
        width: 60%;
    }

    .wd-7 {
        width: 70%;
    }

    .wd-8 {
        width: 80%;
    }

    .wd-9 {
        width: 90%;
    }

    .wd-10 {
        width: 100% !important;
    }

    /* 高度 */
    .h-1 {
        height: 10vh;
    }

    .h-2 {
        height: 20vh;
    }

    .h-3 {
        height: 30vh;
    }

    .h-4 {
        height: 40vh;
    }

    .h-5 {
        height: 50vh;
    }

    .h-6 {
        height: 60vh;
    }

    .h-7 {
        height: 70vh;
    }

    .h-8 {
        height: 80vh;
    }

    .h-9 {
        height: 90vh;
    }

    .h-10 {
        height: 100vh;
    }

    /* 弹性宽度 */
    .fl-1 {
        flex: 0.1;
    }

    .fl-2 {
        flex: 0.2;
    }

    .fl-3 {
        flex: 0.3;
    }

    .fl-4 {
        flex: 0.4;
    }

    .fl-5 {
        flex: 0.5;
    }

    .fl-6 {
        flex: 0.6;
    }

    .fl-7 {
        flex: 0.7;
    }

    .fl-8 {
        flex: 0.8;
    }

    .fl-9 {
        flex: 0.9;
    }

    .fl-10 {
        flex: 1;
    }

    /*边框*/
    .border {
        border: 1px solid #dddddd;
    }

    .border-t {
        border-top: 1px solid #dddddd;
    }

    .border-l {
        border-left: 1px solid #dddddd;
    }

    .border-r {
        border-right: 1px solid #dddddd;
    }

    .border-b {
        border-bottom: 1px solid #dddddd;
    }

    .border-c-lg {
        border-color: #b2b2b2;
    }

    .border-c-g {
        border-color: #888888;
    }

    .border-c-se {
        border-color: #353535;
    }

    .border-c-b {
        border-color: black;
    }

    .border-c-w {
        border-color: #ffffff;
    }

    .border-c-l {
        border-color: #576b95;
    }

    .border-c-s {
        border-color: #09bb07;
    }

    .border-c-e {
        border-color: #e64340;
    }

    .border-c-m {
        border-color: #ffbf27;
    }

    .border-c-ws {
        border-color: #f5f5f5;
    }

    /*字*/
    .ta-l {
        text-align: left;
    }

    .ta-c {
        text-align: center;
    }

    .ta-r {
        text-align: right;
    }

    /*圆角*/
    .fillet {
        border-radius: 10px;
    }

    .capsule {
        border-radius: 50px;
    }

    .circle {
        border-radius: 50%;
    }

    /*定位*/
    .fixed {
        position: fixed;
    }

    .absolute {
        position: absolute;
    }

    .relative {
        position: relative;
    }

    .sticky {
        position: sticky;
    }

    /*定位*/
    .l-0 {
        left: 0px;
    }

    .l-10 {
        left: 10px;
    }

    .l-20 {
        left: 20px;
    }

    .l-30 {
        left: 30px;
    }

    .l-40 {
        left: 40px;
    }

    .r-0 {
        right: 0px;
    }

    .r-10 {
        right: 10px;
    }

    .r-20 {
        right: 20px;
    }

    .r-30 {
        right: 30px;
    }

    .r-40 {
        right: 40px;
    }

    .t-0 {
        top: 0px;
    }

    .t-10 {
        top: 10px;
    }

    .t-20 {
        top: 20px;
    }

    .t-30 {
        top: 30px;
    }

    .t-40 {
        top: 40px;
    }

    .b-0 {
        bottom: 0px;
    }

    .b-10 {
        bottom: 10px;
    }

    .b-20 {
        bottom: 20px;
    }

    .b-30 {
        bottom: 30px;
    }

    .b-40 {
        bottom: 40px;
    }

    /* 层级 */
    .zi-1 {
        z-index: 9;
    }

    .zi-2 {
        z-index: 99;
    }

    .zi-3 {
        z-index: 999;
    }

    .zi-4 {
        z-index: 9999;
    }

    .zi-5 {
        z-index: 99999;
    }

    .zi-6 {
        z-index: 999999;
    }

    .zi-7 {
        z-index: 9999999;
    }

    .zi-8 {
        z-index: 99999999;
    }

    .zi-9 {
        z-index: 999999999;
    }

    /* 暂无数据 */
    .nodata {
        width: 200px;
        height: 200px;
    }

    .overHide {
        overflow: hidden;
    }
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none !important;
        appearance: none !important;
        margin: 0 !important;
    }
    /* 火狐 */
    input {
        -moz-appearance: textfield !important;
    }
</style>
